<template>
    <CommonContainer title="审批批复建议">
        <div  style="position: relative;left: -40px; width: 110%">
            <el-timeline>
                <el-timeline-item
                    v-for="(item, index) in flows"
                    :key="index"
                    color="#1890FF"
                    hide-timestamp
                >
                    <div>
                        <p class="timelineItem">
                            <span class="recordContent" style="color: #333333">{{ item.assignee }}</span>
                            <span style="margin: 0 5px; color:#666666;">{{ item.nodeType == 1 ? '发起人' : '审批人' }}</span>
                            <span style="color: #999999">{{ item.endTime || item.startTime }}</span>
                        </p>
                        <div class="approveContent" v-if="item.auditResults">
                            <div style="color: #52C41A">{{ item.auditResults }}</div>
                            <div v-if="item.message">审批意见:{{ item.message }}</div>
                        </div>
                    </div>

                </el-timeline-item>
            </el-timeline>
        </div>

    </CommonContainer>
</template>

<script>
import {getFlowRecord} from '@/api/letterReview/letterReview'

export default {
    components: {},
    props: ['id'],
    data() {
        // 这里存放数据
        return {
            flows: []
        }
    },
    // 计算属性 类似于 data 概念
    computed: {},
    // 方法集合
    methods: {
        getFlowRecord() {
            getFlowRecord(this.id).then(res => {
                this.flows = res.data;
                // if (this.flows && this.flows.length > 0) {
                //     this.flows = this.flows.map((item, index) => {
                //         if (index == 0) {//发起人
                //             this.$set(item, 'approveType', 1)
                //         } else {//审批人
                //             this.$set(item, 'approveType', 2)
                //         }
                //         return item
                //     })
                // }
            })
        }
    },
    // 生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {
        this.getFlowRecord()
    },

}
</script>

<style lang="scss" scoped>
.timelineItem {
    font-size: 14px;
    font-weight: 500;
    color: #666666;

    .recordContent {
        color: #333333;
    }
}

.approveContent {
    box-sizing: border-box;
    background-color: #F9FBFE;
    padding: 16px;
    border-radius: 4px;


}

::v-deep ul {
    display: block;
    padding-inline-start: 0px;
}
</style>
